import {Component, EventEmitter, OnInit} from '@angular/core';
import {Output} from "@angular/core";
import {EventBusService} from "../../services/event-bus.service"
import { Store ,select} from '@ngrx/store';
import * as fromRoot from "../../reducers";
import {getAuthState} from "../../reducers";
import * as actions from "../../actions/auth.action";
import { Observable } from 'rxjs';
import { Auth } from "../../domain";
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  dark:boolean = false;
  toolbarcolor:string = 'primary';
  toggleButtonState:boolean = false;
  auth$:Observable<Auth>;
  @Output() toggle = new EventEmitter<void>();
  @Output() toggleDarkTheme = new EventEmitter<boolean>();
  constructor(
    private eventBus:EventBusService,
    private store$:Store<fromRoot.State>
    ) {
      this.auth$ = this.store$.pipe(select(getAuthState))
  }
  ngOnInit() {
  }
  openSidebar(){
    this.toggle.emit();
  }
  onChange(checked:boolean){
    // this.dark = !this.dark;
    // this.eventBus.toogleButton.emit(this.dark);
    // this.toolbarcolor = this.toolbarcolor == 'primary'?'':'primary';
    // this.toggleButtonState = !this.toggleButtonState;
    // this.toggleDarkTheme.emit(this.toggleButtonState);
    this.toggleDarkTheme.emit(checked);
  }
  logout(){
    this.store$.dispatch(new actions.LogoutAction(null));
  }
}
